---
title: Front Matter CMS & Astro
description: Add content to your Astro project using Front Matter CMS
sidebar:
  label: Front Matter CMS
type: cms
logo: frontmatter-cms
i18nReady: true
---
import { FileTree } from '@astrojs/starlight/components';

[Front Matter CMS](https://frontmatter.codes/) brings the CMS to your editor, it runs within Visual Studio Code, Gitpod, and many more.

## Integration with Astro

In this section, we'll walk through how to add Front Matter CMS to your Astro project.

### Prerequisites 

- Visual Studio Code
- Use the [Astro Blog template](https://github.com/withastro/astro/tree/main/examples/blog) to provide the base configuration and sample content to start with Front Matter CMS.

### Install the Front Matter CMS extension

You can get the extension from the [Visual Studio Code Marketplace - Front Matter](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter) or by clicking on the following link: [open Front Matter CMS extension in VS Code](vscode:extension/eliostruyf.vscode-front-matter)

### Project initialization

Once Front Matter CMS is installed, you will get a new icon in the Activity Bar. It will open the **Front Matter CMS** panel in the primary sidebar when you click on it. Follow the next steps to initialize your project:

- Click on the **Initialize project** button in the Front Matter panel
- The welcome screen will open, and you can start initializing the project
- Click on the first step to **Initialize project**
- As Astro is one of the supported frameworks, you can select it from the list
- Register your content folders, in this case, the `src/content/blog` folder.

  :::note
  Folder registration is required to let Front Matter CMS know where it can find and create your content. You can have multiple types of folders like pages, blog, docs, and many more.
  :::

- You will be asked to enter the name of the folder. By default, it takes the folder name.

  :::note
  The name gets used during the creation process of new content. For example, having multiple folder registrations allows you to choose the type of content you want to create.
  :::

- Click on **Show the dashboard** to open the content dashboard

  :::tip
  Once Front Matter CMS is initialized, you can open the dashboard as follows:

  - Using the keyboard binding: <kbd>alt</kbd> + <kbd>d</kbd> (Windows & Linux) or <kbd>options</kbd> + <kbd>d</kbd> (macOS)
  - Open the command palette and search for `Front Matter: Open dashboard`
  - Click on the **Front Matter** icon on the panel's title bar or files.
  :::

### Project configuration

Once the project is initialized, you will get a `frontmatter.json` configuration file and a `.frontmatter` folder in the root of your project.

<FileTree title="Project Structure">
- .frontmatter/
  - database/
    - mediaDb.json
- src/
- astro.config.mjs
- **frontmatter.json**
- package.json
</FileTree>

#### Content-type configuration

Content-types are the way Front Matter CMS manages your content. Each content-type contains a set of fields, which can be defined per type of content you want to use for your website.

The fields correspond to the front matter of your page content.

You can configure the content-types in the `frontmatter.json` file. 

- Open the `frontmatter.json` file
- Replace the `frontMatter.taxonomy.contentTypes` array with the following content-types configuration:

```json title="frontmatter.json"
"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Publishing date",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Content preview",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]
```

:::note
This configuration ensures that the Front Matter content-type matches the content collection schema from the Astro blog template.
:::

:::tip
You can find more information on content-types and the supported fields in the [content creation docs section](https://frontmatter.codes/docs/content-creation) from Front Matter CMS.
:::

### Preview your articles in the editor

From the **Front Matter CMS** panel, click on the **Start server** button. This action starts the Astro local dev server. Once running, you can open the content dashboard, select one of the articles and click on the **Open preview** button to open the article in the editor.

### Create new articles

Open the **Front Matter CMS Dashboard**; you can do this as follows: 

- Open the Front Matter CMS' content dashboard
- Click on the **Create content** button
- Front Matter will ask you for the title of the article. Fill it in and press enter
- Your new article will be created and opened in the editor. You can start writing your article.

### Using Markdoc with Front Matter CMS

To use Markdoc with Front Matter CMS, you must configure this in the `frontMatter.content.supportedFileTypes`. This setting lets the CMS know which types of files it can progress.

You can configure the setting as follows:

```json title="frontmatter.json"
"frontMatter.content.supportedFileTypes": [ "md", "markdown", "mdx", "mdoc" ]
```

To allow your content to be created as Markdoc, specify the `fileType` property on the content-type.

```json title="frontmatter.json" ins={7}
"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fileType": "mdoc",
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Publishing date",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Content preview",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]
```

## Official Resources

- [Front Matter CMS](https://frontmatter.codes/)
- [Front Matter CMS - Documentation](https://frontmatter.codes/docs/)
- [Getting started with Astro and Front Matter CMS](https://youtu.be/xb6pZiier_E)
